import useGetApiData from "@/hooks/useGetApiData";
import {Empty} from "@/page/Toy/Home/components/Manual/Empty";
import {forwardRef, useEffect, useImperativeHandle} from "react";
import {getItemList} from "@/api/user/toyItem";
import "./index.scss";
import {useNavigate} from "react-router";

interface ToyItem {
  id: string;
  createdTime: string;
  toyItem: any;
}

// 玩具主题默认图片
const DefaultToyImage = () => (
  <svg width="50%" height="50%" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* 背景 */}
    <rect width="120" height="120" fill="#F8F9FA" />

    {/* 积木组 */}
    <g transform="translate(20, 25)">
      {/* 积木1 - 红色 */}
      <rect x="0" y="40" width="25" height="25" rx="4" fill="#FF9F87" />
      {/* 积木2 - 蓝色 */}
      <rect x="30" y="25" width="25" height="40" rx="4" fill="#6EBDFF" />
      {/* 积木3 - 绿色 */}
      <rect x="60" y="45" width="25" height="20" rx="4" fill="#6ED9A0" />

      {/* 积木凸点装饰 */}
      <circle cx="7.5" cy="47.5" r="2.5" fill="#FFF" fillOpacity="0.5" />
      <circle cx="17.5" cy="47.5" r="2.5" fill="#FFF" fillOpacity="0.5" />
      <circle cx="37.5" cy="32.5" r="2.5" fill="#FFF" fillOpacity="0.5" />
      <circle cx="47.5" cy="32.5" r="2.5" fill="#FFF" fillOpacity="0.5" />
      <circle cx="67.5" cy="52.5" r="2.5" fill="#FFF" fillOpacity="0.5" />
      <circle cx="77.5" cy="52.5" r="2.5" fill="#FFF" fillOpacity="0.5" />
    </g>

    {/* 玩具熊 */}
    <g transform="translate(45, 15)">
      {/* 头部 */}
      <circle cx="15" cy="15" r="12" fill="#FFCC66" />
      {/* 耳朵 */}
      <circle cx="7" cy="7" r="4" fill="#FFCC66" />
      <circle cx="23" cy="7" r="4" fill="#FFCC66" />
      {/* 面部特征 */}
      <circle cx="12" cy="13" r="1.5" fill="#6C757D" />
      <circle cx="18" cy="13" r="1.5" fill="#6C757D" />
      <path d="M12 18C12 18 15 20 18 18" stroke="#6C757D" strokeWidth="1.5" strokeLinecap="round" />
    </g>

    {/* 装饰元素 - 星星 */}
    <path d="M95 20L97.5 25L103 25.5L99 29L100 34L95 31.5L90 34L91 29L87 25.5L92.5 25L95 20Z" fill="#FFD700" fillOpacity="0.6" />
    <path d="M25 85L27.5 90L33 90.5L29 94L30 99L25 96.5L20 99L21 94L17 90.5L22.5 90L25 85Z" fill="#FFD700" fillOpacity="0.6" />

    {/* 说明书图标 */}
    <g transform="translate(85, 75)">
      <rect x="0" y="0" width="20" height="25" rx="2" fill="#ADB5BD" fillOpacity="0.3" />
      <line x1="4" y1="5" x2="16" y2="5" stroke="#ADB5BD" strokeWidth="2" strokeLinecap="round" />
      <line x1="4" y1="10" x2="16" y2="10" stroke="#ADB5BD" strokeWidth="2" strokeLinecap="round" />
      <line x1="4" y1="15" x2="12" y2="15" stroke="#ADB5BD" strokeWidth="2" strokeLinecap="round" />
    </g>
  </svg>
);

export const Manual = forwardRef(({}, ref) => {
  const {data: itemList, request: itemListRequest} = useGetApiData(getItemList, {});
  const navigate = useNavigate();
  useImperativeHandle(ref, () => ({
    getData: () => itemListRequest()
  }));
  useEffect(() => {
    itemListRequest();
  }, []);

  const handleClick = (item: ToyItem) => {
    const {toyItem} = item;
    navigate("/toy/detail/" + toyItem?.id, {});
  };
  return (
    <div className="ToyHomeComponentsManual manual">
      <div className="section-header">
        <h3 className="section-title">我的说明书</h3>
        <span className="view-all">查看全部</span>
      </div>

      {itemList.length > 0 ? (
        <div className="section-list">
          {itemList.map((item: ToyItem) => (
            <div key={item.id} className="list-item" onClick={() => handleClick(item)}>
              <div className="item-cover">
                <DefaultToyImage />
                {/*<div className="item-badge">{item.category}</div>*/}
              </div>
              <div className="item-info">
                <h4 className="item-title">{item?.toyItem?.name}</h4>
                <div className="item-meta">
                  <span className="meta-item">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z"
                        fill="currentColor"
                      />
                    </svg>
                  </span>
                  <span className="meta-item">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
                        fill="currentColor"
                      />
                      <path d="M12.5 7H11V13L16.2 16.2L17 14.9L12.5 12.2V7Z" fill="currentColor" />
                    </svg>
                    {item.createdTime}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <Empty />
      )}
    </div>
  );
});
